<template>
    <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
        <div style="display: flex">
            <svg-icon class-name="international-icon" icon-class="language" class="svgIconCls" />
        </div>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :disabled="language==='zh'" command="zh">
                中文
            </el-dropdown-item>
            <el-dropdown-item :disabled="language==='en'" command="en">
                English
            </el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
export default {
    computed: {
        language() {
            return this.$store.getters.language
        }
    },
    methods: {
        handleSetLanguage(lang) {
            this.$i18n.locale = lang
            this.$store.dispatch('app/setLanguage', lang)
            if(lang == "en"){
                this.$message({
                    message: 'Set Language Successful',
                    type: 'success'
                })
            } else if(lang == "zh"){
                this.$message({
                    message: '设置语言成功',
                    type: 'success'
                })
            }


        }
    }
}
</script>

<style>
.svgIconCls:hover{
    cursor: pointer;
}
</style>